import React from 'react'

import { Layout } from 'antd'

import LoadableComponent from '@/utils/loadable'
import './style.less'




const MySlider=LoadableComponent(import('./myslider'))
const MyHeader=LoadableComponent(import('./myHeader'))
const MyContent=LoadableComponent(import('./myContent'))





const { Header, Sider, Content } = Layout;


class Index extends React.Component{
    state={
        collapsed: false,  //侧边栏的折叠和展开
        panes: [],    //网站打开的标签页列表
        activeMenu: '',  //网站活动的菜单
        theme: localStorage.getItem('theme') || 'light',   //侧边栏主题
    }
    render(){
        const { collapsed, panes, activeMenu, theme } = this.state
        return(
            <Layout style={{ height: '100vh' }}>
                     <Sider trigger={null} collapsible collapsed={collapsed} theme={theme}>
                         <MySlider
                          theme={theme}
                          panes={panes}
                          activeMenu={activeMenu}
                         />
                     </Sider>
                     <Layout>
                       <Header style={{ padding: 0 }}>
                           <MyHeader
                            theme={theme}
                            collapsed={collapsed}
                           />
                       </Header>
                       <Content>
                        <MyContent
                            panes={panes}
                            activeMenu={activeMenu}
                         />
                       </Content>
                     </Layout>
            </Layout>
        )
    }
}


export default Index;